<template>
	<view class="container">
		<top-back-navbar position="fixed" title="集贝钱包" background="" color="rgb(82, 123, 173)"></top-back-navbar>
		<tabbars :current="2"></tabbars>
		<view class="header">
			<view class="header-box">
				<image src="/static/images/home/qianbao.png" class="face"></image>
				<view class="right_header_box">
					<view class="right_header_box_bg">
						<view class="user-list user-list-border">
							<text class="user-name">小贝总发行量：</text>
							<text class="user-id">{{res.issue}}</text>
						</view>
						<view class="user-list user-list-border">
							<text class="user-name">小贝流通量：</text>
							<text class="user-id">{{res.circulation}}</text>
						</view>
						<view class="user-list">
							<text class="user-name">小贝销毁量：</text>
							<text class="user-id">{{res.destruction}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qianbao-title">资产数据</view>
		<view class="qianbao-list">
			<view class="qianbao-list-item">
				<view class="qianbao-item">
					<view class="qianbao-detail">
						<view class="qianbao-name">账户充值</view>
						<!-- <view class="qianbao-icon qianbao-icon-border1" @click="$u.route(`/pages/member/chongzhi/czjl/czjl`)">明细</view> -->
						<view class="qianbao-icon qianbao-icon-border3"
							@click="$u.route(`/pages/member/chongzhi/chongzhi`)">充值</view>
					</view>
					<view class="qianbao-detail">
						<view class="qianbao-money">{{res.credit2 || '0.00'}}</view>
						<!-- <view class="qianbao-icon qianbao-icon-border3" @click="$u.route(`/pages/member/chongzhi/chongzhi`)">充值</view> -->
						<view class="qianbao-icon qianbao-icon-border3"
							@click="$u.route('/pages/member/details/tx/txc')">提现</view>
					</view>
					<view class="qianbao-detail">
						<view class="qianbao-name"></view>
						<view class="qianbao-icon qianbao-icon-border1"
							@click="$u.route(`/pages/member/acommsion/projcommision/details?type=jb`)">明细</view>
					</view>
					<view class="qianbao-detail">
						<!-- <view class="qianbao-money">{{res.credit1 || '0.00'}}</view> -->
						<!-- <view class="qianbao-icon qianbao-icon-border3" @click="$u.route('/pages/member/details/tx/txc')">提现</view> -->
					</view>
				</view>
			</view>
			<view class="qianbao-list-item">
				<view class="qianbao-item">
					<view class="qianbao-detail" @click="$u.route(`/pages/member/details/bz?type=bz`)">
						<view class="qianbao-name">贝值</view>
						<view class="qianbao-icon qianbao-icon-border1">明细</view>
					</view>
					<view class="qianbao-detail">
						<view class="qianbao-money">{{res.djbz || '0.00'}}</view>
						<view class="qianbao-icon"></view>
					</view>
					<view class="qianbao-detail" @click="$u.route(`/pages/member/details/bzdetail`)">
						<view class="qianbao-name">小贝</view>
						<view class="qianbao-icon qianbao-icon-border3">进入</view>
					</view>
					<view class="qianbao-detail">
						<view class="qianbao-money">{{res.bz || '0.00'}}</view>
						<view class="qianbao-icon"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="qianbao-list">
		<view class="qianbao-list-item">
			<view class="qianbao-item" @click="$u.route(`/pages/member/details/bz?type=dj`)">
				<view class="qianbao-detail">
					<view class="qianbao-name">冻结钱包</view>
					<view class="qianbao-icon qianbao-icon-border1">明细</view>
				</view>
				<view class="qianbao-detail">
					<view class="qianbao-money">{{res.ywallet || '0.00'}}</view>
					<view class="qianbao-icon"></view>
				</view>
			</view>
		</view>
		<view class="qianbao-list-item">
			<view class="qianbao-item" @click="$u.route(`/pages/member/details/bz?type=th`)">
				<view class="qianbao-detail">
					<view class="qianbao-name">提货券</view>
					<view class="qianbao-icon qianbao-icon-border1">明细</view>
				</view>
				<view class="qianbao-detail">
					<view class="qianbao-money">{{res.credit2111 || '0.00'}}</view>
					<view class="qianbao-icon"></view>
				</view>
			</view>
		</view>
	</view> -->
		<!-- <view class="qianbao-list">
		<view class="qianbao-list-item">
			<view class="qianbao-item" @click="$u.route(`/pages/member/details/bz?type=bz`)">
				<view class="qianbao-detail">
					<view class="qianbao-name">贝值</view>
					<view class="qianbao-icon qianbao-icon-border1">明细</view>
				</view>
				<view class="qianbao-detail">
					<view class="qianbao-money">{{res.djbz || '0.00'}}</view>
					<view class="qianbao-icon"></view>
				</view>
			</view>
		</view>
		<view class="qianbao-list-item">
			<view class="qianbao-item" @click="$u.route(`/pages/member/details/bz?type=xb`)">
				<view class="qianbao-detail">
					<view class="qianbao-name">小贝</view>
					<view class="qianbao-icon qianbao-icon-border3">进入</view>
				</view>
				<view class="qianbao-detail">
					<view class="qianbao-money">{{res.bz || '0.00'}}</view>
					<view class="qianbao-icon"></view>
				</view>
			</view>
		</view>
	</view> -->
		<view class="qianbao-list">
			<view class="qianbao-list-item">
				<view class="qianbao-item">
					<view class="qianbao-detail" @click="$u.route(`/pages/member/details/bz?type=xfz`)">
						<view class="qianbao-name">积分值</view>
						<view class="qianbao-icon qianbao-icon-border1">明细</view>
					</view>
					<view class="qianbao-detail">
						<view class="qianbao-money">{{res.djjfz || '0.00'}}</view>
						<view class="qianbao-icon"></view>
					</view>
					<view class="qianbao-detail" @click="$u.route(`/pages/member/details/credit`)">
						<view class="qianbao-name">积分券</view>
						<view class="qianbao-icon qianbao-icon-border3">进入</view>
					</view>
					<view class="qianbao-detail">
						<view class="qianbao-money">{{res.fenhongzhi || '0.00'}}</view>
						<view class="qianbao-icon"></view>
					</view>
				</view>
			</view>
			<view class="qianbao-list-item">
				<view class="qianbao-item">
					<view class="qianbao-detail" @click="$u.route(`/pages/member/details/bz?type=gz`)">
						<view class="qianbao-name">股值</view>
						<view class="qianbao-icon qianbao-icon-border1">明细</view>
					</view>
					<view class="qianbao-detail">
						<view class="qianbao-money">{{res.djtzz || '0.00'}}</view>
						<view class="qianbao-icon"></view>
					</view>
					<view class="qianbao-detail" @click="$u.route(`/pages/member/details/tzz`)">
						<view class="qianbao-name">股券</view>
						<view class="qianbao-icon qianbao-icon-border3">进入</view>
					</view>
					<view class="qianbao-detail">
						<view class="qianbao-money">{{res.tzz || '0.00'}}</view>
						<view class="qianbao-icon"></view>
					</view>
				</view>
			</view>

			<!-- <view class="qianbao-list-item">
			<view class="qianbao-item" @click="$u.route(`/pages/member/details/bz?type=xfq`)">
				<view class="qianbao-detail">
					<view class="qianbao-name">消费券</view>
					<view class="qianbao-icon qianbao-icon-border3">进入</view>
				</view>
				<view class="qianbao-detail">
					<view class="qianbao-money">{{res.fenhongzhi || '0.00'}}</view>
					<view class="qianbao-icon"></view>
				</view>
			</view>
		</view> -->
		</view>
		<!-- <view class="qianbao-list">
		<view class="qianbao-list-item">
			<view class="qianbao-item" @click="$u.route(`/pages/member/details/bz?type=szz`)">
				<view class="qianbao-detail">
					<view class="qianbao-name">数字资产</view>
					<view class="qianbao-icon qianbao-icon-border1">明细</view>
				</view>
				<view class="qianbao-detail">
					<view class="qianbao-money">{{res.djtzz || '0.00'}}</view>
					<view class="qianbao-icon"></view>
				</view>
			</view>
		</view>
		<view class="qianbao-list-item">
			<view class="qianbao-item">
				<view class="qianbao-detail">
					<view class="qianbao-name">待开放</view>
					<view class="qianbao-icon qianbao-icon-border1">明细</view>
				</view>
				<view class="qianbao-detail">
					<view class="qianbao-money">{{res.fenhongzhi || '0.00'}}</view>
					<view class="qianbao-icon"></view>
				</view>
			</view>
		</view>
	</view> -->
		<!-- <view class="shuju_box u-f-ac u-f-jsb f-w-w">
      <view class="shuju_item u-f-ajc u-f-column">
        <view class="zudi u-f-ac" @click="$u.route(`/pages/member/details/ytz/ytz`)">
          <view class="u-f-ajc">股值</view>
          <view>{{res.djtzz || '0.00'}}</view>
        </view>
        <view class="zudi u-f-ac" @click="$u.route(`/pages/member/details/tzz`)">
          <view class="u-f-ajc">股券</view>
          <view>{{res.tzz || '0.00'}}</view>
        </view>
      </view>
      <view class="shuju_item u-f-ajc u-f-column">
        <view class="zudi u-f-ac" @click="$u.route(`/pages/member/details/jfz/jfz`)">
          <view class="u-f-ajc">消费值</view>
          <view>{{res.djjfz || '0.00'}}</view>
        </view>
        <view class="zudi u-f-ac" @click="$u.route(`/pages/member/details/credit`)">
          <view class="u-f-ajc">消费券</view>
          <view>{{res.credit1 || '0.00'}}</view>
        </view>
      </view>
      <view class="shuju_item u-f-ajc u-f-column">
        <view class="zudi u-f-ac" @click="$u.route(`/pages/member/details/djz/fhz`)">
          <view class="u-f-ajc">数字资产</view>
          <view>{{res.fenhongzhi || '0.00'}}</view>
        </view>
        <view class="zudi u-f-ac">
          <view class="u-f-ajc">待开放</view>
          <view>{{res.credit2111 || '0.00'}}</view>
        </view>
      </view>

    </view> -->

		<!-- <view class="content">
      <view class="grid_box f-w-w u-f-ac u-f-jsb">
        <view class="grid_item u-f-ajc u-f-column" :style="{background: `url(${item.icon}) no-repeat 0 0`}"
          v-for="(item, index) in userList" :key="index" @click="goDetail(item, index)">
          <image :src="item.icon" mode=""></image>
          <view>{{item.title}}</view>
        </view>
      </view>
    </view> -->


		<u-toast ref="uToast"></u-toast>
		<view style="height:110rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tzz: '0',
				credit2: '0',
				bz: '0',
				a_kzp: '0',
				credit1: '0',
				nickname: '游客',
				avatar: '../../static/33.jpg',
				res: [],
				order: [{
					text: '待付款',
					icon: '../../static/456.png',
					src: '../order/order?index=1',
					badge: 0
				}, {
					text: '待发货',
					icon: '../../static/123.png',
					src: '../order/order?index=2',
					badge: 0
				}, {
					text: '待收货',
					icon: '../../static/111.png',
					src: '../order/order?index=3',
					badge: 0
				}, {
					text: '已完成',
					icon: '../../static/789.png',
					src: '../order/order?index=4',
					badge: 0
				}],
				userList: [{
						title: '会员资料',
						icon: '/static/jibei/member/shuju_item2.png',
						path: '/pages/member/info/info'
					}, {
						title: '我的提货',
						icon: '/static/jibei/member/shuju_item2.png',
						path: '/pages/order/order?index=0'
					},
					{
						title: '我的社区',
						icon: '/static/jibei/member/shuju_item2.png',
						// path: '/pages/member/favorite'
						// path: '/pages/commission/down/down'
						path: '/pages/member/acommsion/projcommision/myteam'
					},
					{
						title: '邀请函',
						icon: '/static/jibei/member/shuju_item2.png',
						path: '/pages/commission/qrcode/invite_code'
					},
					{
						title: '银行绑卡',
						icon: '/static/jibei/member/shuju_item2.png',
						path: '/pages/member/bankcard/bankcardList'
					},
					{
						title: '实名认证',
						icon: '/static/jibei/member/shuju_item2.png',
						path: '/pages/member/verified/verified'
						// }, {
						//   title: '会员充值',
						//   icon: '../../static/004.png',
						//   path: '/pages/coin/recharge'
					},
					{
						title: '设置管理',
						icon: '/static/jibei/member/shuju_item2.png',
						path: '/pages/commission/qrcode/qrcode'
					},
					{
						title: '地址管理',
						icon: '/static/jibei/member/shuju_item2.png',
						path: '/pages/member/address/post'
					},
					{
						title: '安全退出',
						icon: '/static/jibei/member/shuju_item2.png',
						path: 'logout'
					},
					// {
					//   title: '我的大数据',
					//   icon: '../../static/dashujv.png',
					//   path: '../commission/qrcode/vip'
					// },
					// {
					//   title: '安全中心',
					//   icon: '../../static/003.png',
					//   path: 'no'
					// },
				],
				is_realname: '',
				active: "active",
				openid: '',
				data: [],
			};
		},
		computed: {
			//状态栏高度
			statusHeight() {
				return uni.getSystemInfoSync().statusBarHeight || 10; //如果没有获取到高度，那么指定10px；
			}
		},
		onLoad: function() {
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		onNavigationBarButtonTap: function(e) {
			uni.navigateTo({
				url: 'info/info'
			});
		},
		methods: {
			goDetail(item, index) {
				if (item.path == 'logout') return this.logout()
				this.$u.route(item.path)
			},
			logout() {
				uni.showModal({
					content: "是否退出登录",
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if (res.confirm) {
							uni.clearStorageSync()
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				})
			},

			setAjax() {
				uni.request({
					url: this.$BASE_URL + '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
					method: 'POST',
					data: {
						'openid': this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						// console.log(res)
						uni.hideLoading()
						this.res = res.data
						this.is_realname = res.data.is_realname
						var order = this.order
						for (var i in order) {
							this.order[i].badge = res.data.order[i]
						}
					},
					fail: () => {},
					complete: () => {}
				});
				// 浏览历史
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.history.get_list&app=1',
					method: 'POST',
					data: {
						'openid': this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						this.data = res.data.result.list
						// console.log(this.data)
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jump(e) {
				// console.log(e)
				if (e.currentTarget.dataset.src == 'no') {
					this.jumpno()
				}
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			jumpno() {
				uni.showModal({
					title: '提示',
					content: '功能即将开放',
					showCancel: false,
					confirmColor: "#DD524D",
					success() {
						return
					}
				})
			},
			jumptab(e) {
				uni.switchTab({
					url: e.currentTarget.dataset.src
				})
			},
			jumpcart(e) {
				// console.log('/pages'+e.currentTarget.dataset.src);return;
				uni.navigateTo({
					url: '/pages/cart/cart'
				});
			},
			jumpto() {
				uni.navigateTo({
					url: '/pages/commission/qrcode/invite_code'
				})
			},
			setup() {
				uni.navigateTo({
					url: './info/info'
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-size: 100% 100%;
	}

	.container {
		height: 100vh;
		width: 100vw;
		background: url('/static/images/home/qianbao_bg.png') 0 0 no-repeat;
	
	}

	.header {
		padding: 30rpx;

		.header-box {
			display: flex;
			align-items: center;
			background: url('/static/jibei/xiaobeiqianbao/xiaobei_header.png') 0  0 no-repeat;
			background-size: 100% 100%;
			padding-left: 50rpx;
			.face {
				width: 174rpx;
				height: 174rpx;
				border-radius: 50%;
			}

			.right_header_box {
				flex: 1;
				padding-left: 30rpx;

				.right_header_box_bg {
					padding: 10rpx 30rpx;
					border-radius: 20rpx;
				}

				.user-list {
					height: 64rpx;
					display: flex;
					align-items: center;
				}

				.user-list-border {
					border-bottom: 1px solid #dbdcdc;
				}

				.user-name {
					font-size: 30rpx;
					width: 52%;
					font-weight: 600;
				}

				.user-id {
					font-size: 30rpx;
					width: 48%;
				}
			}

		}
	}

	.qianbao-title {
		padding: 20rpx 20rpx 10rpx 50rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.qianbao-list {
		padding: 0 15rpx;
		display: flex;
		align-items: center;

		.qianbao-list-item {
			padding: 15rpx;
			width: 50%;

			.qianbao-item {
				position: relative;
				background: url('/static/images/home/qianbao_bg1.png') center no-repeat;
				background-size: 100% 100%;
				padding: 15rpx 30rpx;

				.qianbao-detail {
					height: 68rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.qianbao-name {
					font-size: 28rpx;
					color: #818182;
				}

				.qianbao-money {
					font-size: 32rpx;
					font-weight: bold;
					color: #001b4d;
					font-family: NumFonts;
				}

				.qianbao-icon {
					height: 46rpx;
					width: 110rpx;
					border-radius: 46rpx;
					font-size: 28rpx;
					line-height: 46rpx;
					text-align: center;
				}
			}

			.qianbao-icon-border1 {
				border: 1px solid #818182;
				color: #818182;
			}

			.qianbao-icon-border2 {
				border: 1px solid #001b4d;
				color: #ffffff;
				background-color: #001b4d;
			}

			.qianbao-icon-border3 {
				border: 1px solid #ed4c59;
				color: #ffffff;
				background-color: #ed4c59;
			}
		}
	}
</style>